import * as Popover from '@radix-ui/react-popover'
import KapWindow from './kap-window'
import Info from './info'
import ExpandMoreIcon from '../../svg/expand-more'
import styles from './hero.module.css'
import buttonStyles from '../../Button/Button.module.css'

const Hero = () => (
  <section className={styles.hero}>
    <header className={`${styles.header} grid`}>
      <div className={styles.logo}>
        <img className={styles.logo} src='/static/images/logos/logo.png' />
      </div>
      {/* Download Button */}
      <Popover.Root>
        <Popover.Trigger className={`${buttonStyles.button} ${buttonStyles.light} ${styles.downloadButton}`}>
          <span className={styles.buttonText}>下载 rubick</span>
          <ExpandMoreIcon />
        </Popover.Trigger>
        <Popover.Portal>
          <Popover.Content className={styles.popoverContent} sideOffset={5} align="end">
            <ul>
              <li>
                <a href="/api/download/x64.exe" download>
                  Windows 64 位下载
                </a>
              </li>
              <li>
                <a href="/api/download/ia32.exe" download>
                  Windows 32 位下载
                </a>
              </li>
              <li>
                <a href="/api/download/arm64.dmg" download>
                  MacOS M1 下载
                </a>
              </li>
              <li>
                <a href="/api/download/x64.dmg" download>
                  MacOS Intel 下载
                </a>
              </li>
              <li>
                <a href="/api/download/deb" download>
                  Linux 下载
                </a>
              </li>
            </ul>
          </Popover.Content>
        </Popover.Portal>
      </Popover.Root>
    </header>

    <div className={styles.heroContent}>
      <h1>开源桌面端效率工具</h1>
      <h3>使用 electron 构建的开源、免费效率工具</h3>
      <Info />
    </div>
    <KapWindow />

    <div className={styles.curveContainer}>
      <div className={styles.curve} />
    </div>
  </section>
)

export default Hero
